<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS 第 03 天 —— 盒子模型 | 前端基础班学习笔记</title>
    <meta name="generator" content="VuePress 1.7.1">
    
    <meta name="description" content="前端基础班笔记">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="preload" href="/basenode/assets/css/0.styles.2182318c.css" as="style"><link rel="preload" href="/basenode/assets/js/app.52c57e5d.js" as="script"><link rel="preload" href="/basenode/assets/js/2.fd1002bd.js" as="script"><link rel="preload" href="/basenode/assets/js/8.750a9450.js" as="script"><link rel="prefetch" href="/basenode/assets/js/10.0fd16134.js"><link rel="prefetch" href="/basenode/assets/js/11.69b32ff0.js"><link rel="prefetch" href="/basenode/assets/js/12.8306a2fe.js"><link rel="prefetch" href="/basenode/assets/js/13.bd409108.js"><link rel="prefetch" href="/basenode/assets/js/14.397fbca0.js"><link rel="prefetch" href="/basenode/assets/js/15.3ebf464d.js"><link rel="prefetch" href="/basenode/assets/js/16.18b0f270.js"><link rel="prefetch" href="/basenode/assets/js/17.aca32580.js"><link rel="prefetch" href="/basenode/assets/js/18.b36abbab.js"><link rel="prefetch" href="/basenode/assets/js/19.40fd0225.js"><link rel="prefetch" href="/basenode/assets/js/20.9c6d2a17.js"><link rel="prefetch" href="/basenode/assets/js/21.6d37b375.js"><link rel="prefetch" href="/basenode/assets/js/22.c01d802c.js"><link rel="prefetch" href="/basenode/assets/js/23.d7de44fa.js"><link rel="prefetch" href="/basenode/assets/js/24.3470c223.js"><link rel="prefetch" href="/basenode/assets/js/3.924754cc.js"><link rel="prefetch" href="/basenode/assets/js/4.4eeb3907.js"><link rel="prefetch" href="/basenode/assets/js/5.88e4a4fd.js"><link rel="prefetch" href="/basenode/assets/js/6.ae7868e8.js"><link rel="prefetch" href="/basenode/assets/js/7.6ab91996.js"><link rel="prefetch" href="/basenode/assets/js/9.26864b79.js">
    <link rel="stylesheet" href="/basenode/assets/css/0.styles.2182318c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/basenode/" class="home-link router-link-active"><!----> <span class="site-name">前端基础班学习笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/basenode/html/" class="nav-link">
  HTML
</a></div><div class="nav-item"><a href="/basenode/css/" class="nav-link router-link-active">
  CSS
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/basenode/html/" class="nav-link">
  HTML
</a></div><div class="nav-item"><a href="/basenode/css/" class="nav-link router-link-active">
  CSS
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>CSS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/basenode/css/" aria-current="page" class="sidebar-link">CSS 学习</a></li><li><a href="/basenode/css/day01.html" class="sidebar-link">CSS 第 01 天 —— 基础选择器</a></li><li><a href="/basenode/css/day02.html" class="sidebar-link">CSS 第 02 天 —— 复合选择器</a></li><li><a href="/basenode/css/day03.html" aria-current="page" class="active sidebar-link">CSS 第 03 天 —— 盒子模型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#能力目标" class="sidebar-link">能力目标</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#☆1-三大特性" class="sidebar-link">☆1. 三大特性</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_1-1-css-三大特性之层叠性-一-04-18" class="sidebar-link">1.1 CSS 三大特性之层叠性（一 ~ 04'18''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_1-2-css-三大特性之继承性-一-04-38" class="sidebar-link">1.2 CSS 三大特性之继承性（一 ~ 04'38''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_1-3-行高的继承-一-09-31" class="sidebar-link">1.3 行高的继承（一 ~ 09'31''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_1-4-css-三大特性之优先级-二-06-30" class="sidebar-link">1.4 CSS 三大特性之优先级（二 ~ 06'30''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_1-5-优先级注意的问题-二-07-43" class="sidebar-link">1.5 优先级注意的问题（二 ~ 07'43''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_1-6-css-权重的叠加-二-06-47" class="sidebar-link">1.6 CSS 权重的叠加（二 ~ 06'47''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_1-7-权重两个练习题-二-05-25" class="sidebar-link">1.7 权重两个练习题（二 ~ 05'25''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#☆2-盒子模型原理" class="sidebar-link">☆2. 盒子模型原理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_2-1-盒子模型导读-二-01-10" class="sidebar-link">2.1 盒子模型导读（二 ~ 01'10''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_2-2-看透网页布局本质-二-03-57" class="sidebar-link">2.2 看透网页布局本质（二 ~ 03'57''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_2-3-盒子模型组成部分-二-03-34" class="sidebar-link">2.3 盒子模型组成部分（二 ~ 03'34''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#☆3-盒子模型-边框-border" class="sidebar-link">☆3. 盒子模型 - 边框 border</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_3-1-盒子模型边框-border-三-07-31" class="sidebar-link">3.1 盒子模型边框 border（三 ~ 07'31''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_3-2-边框的复合写法-三-07-49" class="sidebar-link">3.2 边框的复合写法（三 ~ 07'49''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_3-3-表格细线边框-三-05-30" class="sidebar-link">3.3 表格细线边框（三 ~ 05'30''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#☆3-4-边框会影响盒子实际大小-三-03-40" class="sidebar-link">☆3.4 边框会影响盒子实际大小（三 ~ 03'40''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#☆4-盒子模型-内边距-padding" class="sidebar-link">☆4. 盒子模型 - 内边距 padding</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_4-1-盒子模型内边距-padding-三-04-10" class="sidebar-link">4.1 盒子模型内边距 padding（三 ~ 04'10''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_4-2-padding-复合属性-三-06-07" class="sidebar-link">4.2 padding 复合属性（三 ~ 06'07''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_4-3-padding-会影响盒子实际大小-三-04-32" class="sidebar-link">4.3 padding 会影响盒子实际大小（三 ~ 04'32''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#☆4-4-padding-应用-新浪导航栏-2-案例-四" class="sidebar-link">☆4.4 padding 应用-新浪导航栏（2）案例（四）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_4-5-1-小米侧边栏修改-四-02-56" class="sidebar-link">4.5.1 小米侧边栏修改（四 ~ 02'56''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_4-6-1-padding-不会撑开盒子的情况-四-04-55" class="sidebar-link">4.6.1 padding 不会撑开盒子的情况（四 ~ 04'55''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#☆5-盒子模型-外边距-margin" class="sidebar-link">☆5. 盒子模型 - 外边距 margin</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_5-1-盒子模型外边距-margin-五-06-34" class="sidebar-link">5.1 盒子模型外边距 margin（五 ~ 06'34''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_5-2-外边距典型应用-块级盒子水平居中对齐-五-03-41" class="sidebar-link">5.2 外边距典型应用-块级盒子水平居中对齐（五 ~ 03'41''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_5-3-行内元素和行内块元素水平居中-五-02-40" class="sidebar-link">5.3 行内元素和行内块元素水平居中（五 ~ 02'40''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_5-4-外边距合并-相邻块元素垂直外边距-五-04-17" class="sidebar-link">5.4 外边距合并-相邻块元素垂直外边距（五 ~ 04'17''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_5-5-外边距合并-嵌套块元素塌陷-五-06-04" class="sidebar-link">5.5 外边距合并-嵌套块元素塌陷（五 ~ 06'04''）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_5-6-清除内外边距-五-04-52" class="sidebar-link">5.6 清除内外边距（五 ~ 04'52''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#☆6-综合案例-产品模块布局" class="sidebar-link">☆6. 综合案例 - 产品模块布局</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_6-1-产品模块布局分析图" class="sidebar-link">6.1 产品模块布局分析图</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_6-2-像素大厨切图稿" class="sidebar-link">6.2 像素大厨切图稿</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_6-3-素材图片" class="sidebar-link">6.3 素材图片</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day03.html#_6-4-素材代码" class="sidebar-link">6.4 素材代码</a></li></ul></li></ul></li><li><a href="/basenode/css/day04.html" class="sidebar-link">CSS 第 04 天 —— 浮动</a></li><li><a href="/basenode/css/day05.html" class="sidebar-link">CSS 第 05 天 —— 学成在线</a></li><li><a href="/basenode/css/day06.html" class="sidebar-link">CSS 第 06 天 —— 定位</a></li><li><a href="/basenode/css/day07.html" class="sidebar-link">CSS 第 07 天 —— 高级技巧</a></li><li><a href="/basenode/css/day08.html" class="sidebar-link">CSS 第 08 天 —— HTML5+CSS3 提高</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="css-第-03-天-盒子模型"><a href="#css-第-03-天-盒子模型" class="header-anchor">#</a> CSS 第 03 天 —— 盒子模型</h1> <h2 id="能力目标"><a href="#能力目标" class="header-anchor">#</a> 能力目标</h2> <ol><li>掌握 CSS <strong>三大特性</strong>，遇到 CSS 冲突问题能够分析并动手解决；</li> <li>掌握<strong>盒子模型</strong>的<strong>边框</strong>、<strong>内间距</strong>、<strong>外边距</strong>的作用及设置方法；</li> <li>能够说出<strong>外边距合并</strong>问题的现象及解决办法（面试题）。</li></ol> <h2 id="☆1-三大特性"><a href="#☆1-三大特性" class="header-anchor">#</a> ☆1. 三大特性</h2> <h3 id="_1-1-css-三大特性之层叠性-一-04-18"><a href="#_1-1-css-三大特性之层叠性-一-04-18" class="header-anchor">#</a> 1.1 CSS 三大特性之层叠性（一 ~ 04'18''）</h3> <h4 id="_1-1-1-「css-三大特性之层叠性」问题"><a href="#_1-1-1-「css-三大特性之层叠性」问题" class="header-anchor">#</a> 1.1.1 「CSS 三大特性之层叠性」问题</h4> <ul><li>问题 1：CSS 三大特性是什么？</li> <li>问题 2：在开发中什么时候会出现样式层叠？</li> <li>问题 3：样式层叠的原则是什么？</li></ul> <h4 id="_1-1-2-「css-三大特性之层叠性」答案"><a href="#_1-1-2-「css-三大特性之层叠性」答案" class="header-anchor">#</a> 1.1.2 「CSS 三大特性之层叠性」答案</h4> <ul><li><p>问题 1：CSS 三大特性是什么？</p> <ul><li>层叠性、继承性、优先级</li></ul></li> <li><p>问题 2：在开发中什么时候会出现样式层叠？</p> <ul><li>对一个元素多次设置同一个样式，会使用最后一次设置的属性值</li></ul></li> <li><p>问题 3：样式层叠的原则是什么？</p> <ul><li>样式冲突，就近原则，后定义，后生效</li> <li>样式不冲突，无论定义先后，始终有效</li></ul></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>CSS（Cascading Style Sheet）<strong>层叠样式表</strong>，所谓<strong>层叠</strong>就是叠加的意思，表示样式可以一层一层的覆盖。</p></div> <h3 id="_1-2-css-三大特性之继承性-一-04-38"><a href="#_1-2-css-三大特性之继承性-一-04-38" class="header-anchor">#</a> 1.2 CSS 三大特性之继承性（一 ~ 04'38''）</h3> <h4 id="_1-2-1-「css-三大特性之继承性」问题"><a href="#_1-2-1-「css-三大特性之继承性」问题" class="header-anchor">#</a> 1.2.1 「CSS 三大特性之继承性」问题</h4> <ul><li>问题 1：CSS 的继承性有什么好处？举例说明。</li> <li>问题 2：什么是 CSS 的继承？子元素通常能够继承哪些样式？</li> <li>问题 3：你会用 Chrome 的调试工具查询哪些属性是继承的吗？</li></ul> <h4 id="_1-2-2-「css-三大特性之继承性」答案"><a href="#_1-2-2-「css-三大特性之继承性」答案" class="header-anchor">#</a> 1.2.2 「CSS 三大特性之继承性」答案</h4> <ul><li><p>问题 1：CSS 的继承性有什么好处？举例说明。</p> <ul><li><p>可以从一定程度上简化代码</p></li> <li><p>例如：在 body 标签中统一设置字体及文本默认颜色</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">body</span> <span class="token punctuation">{</span>
  <span class="token property">font</span><span class="token punctuation">:</span> 400 14px/1.5 <span class="token string">'Helvetica Neue'</span><span class="token punctuation">,</span> <span class="token string">'Helvetica'</span><span class="token punctuation">,</span> <span class="token string">'Arial'</span><span class="token punctuation">,</span> <span class="token string">'Microsoft Yahei'</span><span class="token punctuation">,</span>
    <span class="token string">'Hiragino Sans GB'</span><span class="token punctuation">,</span> <span class="token string">'Heiti SC'</span><span class="token punctuation">,</span> <span class="token string">'WenQuanYi Micro Hei'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ul></li> <li><p>问题 2：什么是 CSS 的继承？子元素通常能够继承哪些样式？</p> <ul><li>子元素会继承父元素的<strong>某些</strong>样式，如<strong>文本颜色</strong>、<strong>字体属性</strong>等。</li></ul></li> <li><p>问题 3：你会用 Chrome 的调试工具查询哪些属性是继承的吗？</p> <p><img src="/basenode/assets/img/inherite-styles.1c9fe06e.png" alt="继承属性"></p></li></ul> <h3 id="_1-3-行高的继承-一-09-31"><a href="#_1-3-行高的继承-一-09-31" class="header-anchor">#</a> 1.3 行高的继承（一 ~ 09'31''）</h3> <h4 id="_1-3-1-「行高的继承」问题"><a href="#_1-3-1-「行高的继承」问题" class="header-anchor">#</a> 1.3.1 「行高的继承」问题</h4> <ul><li>问题 1：行高不跟单位表示什么含义？</li> <li>问题 2：在 body 中指定行高 1.5 的最大优势是什么？</li></ul> <h4 id="_1-3-2-「行高的继承」答案"><a href="#_1-3-2-「行高的继承」答案" class="header-anchor">#</a> 1.3.2 「行高的继承」答案</h4> <ul><li><p>问题 1：行高不跟单位表示什么含义？</p> <ul><li>行高不跟单位表示<strong>文字大小的倍数</strong>，例如 1.5 表示以文字大小的 1.5 倍作为行高。</li></ul></li> <li><p>问题 2：在 body 中指定行高 1.5 的最大优势是什么？</p> <ul><li>子元素可以根据自己的文字大小<strong>自动调整行高</strong>。</li></ul></li></ul> <h3 id="_1-4-css-三大特性之优先级-二-06-30"><a href="#_1-4-css-三大特性之优先级-二-06-30" class="header-anchor">#</a> 1.4 CSS 三大特性之优先级（二 ~ 06'30''）</h3> <h4 id="_1-4-1-「css-三大特性之优先级」问题"><a href="#_1-4-1-「css-三大特性之优先级」问题" class="header-anchor">#</a> 1.4.1 「CSS 三大特性之优先级」问题</h4> <ul><li>问题 1：学习优先级能解决什么问题？</li> <li>问题 2：选择器的权重一共有多少个级别？</li></ul> <h4 id="_1-4-2-「css-三大特性之优先级」答案"><a href="#_1-4-2-「css-三大特性之优先级」答案" class="header-anchor">#</a> 1.4.2 「CSS 三大特性之优先级」答案</h4> <ul><li><p>问题 1：学习优先级能解决什么问题？</p> <ul><li>当同一个元素被指定了多个选择器，需要掌握了 CSS 的优先级，才能准确地分析出到底会应用哪个选择器中的样式</li></ul></li> <li><p>问题 2：选择器的权重一共有多少个级别？</p> <table><thead><tr><th>选择器</th> <th>权重</th></tr></thead> <tbody><tr><td>继承或 <code>*</code></td> <td><code>0,0,0,0</code></td></tr> <tr><td>标签选择器</td> <td><code>0,0,0,1</code></td></tr> <tr><td>类选择器 / 伪类选择器</td> <td><code>0,0,1,0</code></td></tr> <tr><td>id 选择器</td> <td><code>0,1,0,0</code></td></tr> <tr><td>行内样式</td> <td><code>1,0,0,0</code></td></tr> <tr><td><code>!important</code></td> <td><code>∞</code></td></tr></tbody></table></li></ul> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>思考：为什么在开发中 class 会使用的多？</p> <ul><li>标签不具体</li> <li>id 很少用</li> <li>类的优先级比标签大，设置样式不容易出问题</li></ul></div> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><code>important</code> 这个单词务必要记住！</p></div> <h3 id="_1-5-优先级注意的问题-二-07-43"><a href="#_1-5-优先级注意的问题-二-07-43" class="header-anchor">#</a> 1.5 优先级注意的问题（二 ~ 07'43''）</h3> <h4 id="_1-5-1-「优先级注意的问题」问题"><a href="#_1-5-1-「优先级注意的问题」问题" class="header-anchor">#</a> 1.5.1 「优先级注意的问题」问题</h4> <ul><li>问题 1：权重的数字能进位吗？（先记忆）</li> <li>问题 2：类选择器永远大于标签选择器，这句话对吗？</li> <li>问题 3：继承的权重是多少？</li></ul> <h4 id="_1-5-2-「优先级注意的问题」答案"><a href="#_1-5-2-「优先级注意的问题」答案" class="header-anchor">#</a> 1.5.2 「优先级注意的问题」答案</h4> <ul><li><p>问题 1：权重的数字能进位吗？（先记忆）</p> <ul><li>不能进位</li></ul></li> <li><p>问题 2：类选择器永远大于标签选择器，这句话对吗？</p> <ul><li>对</li></ul></li> <li><p>问题 3：继承的权重是多少？</p> <ul><li><code>0</code></li></ul></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>看标签具体执行哪一样式，就先看这个标签有没有被直接选出来。</p></div> <h3 id="_1-6-css-权重的叠加-二-06-47"><a href="#_1-6-css-权重的叠加-二-06-47" class="header-anchor">#</a> 1.6 CSS 权重的叠加（二 ~ 06'47''）</h3> <h4 id="_1-6-1-「css-权重的叠加」问题"><a href="#_1-6-1-「css-权重的叠加」问题" class="header-anchor">#</a> 1.6.1 「CSS 权重的叠加」问题</h4> <ul><li>问题 1：在使用哪一类选择器时需要考虑权重叠加的问题？</li> <li>问题 2：权重叠加可以进位吗？</li></ul> <h4 id="_1-6-2-「css-权重的叠加」答案"><a href="#_1-6-2-「css-权重的叠加」答案" class="header-anchor">#</a> 1.6.2 「CSS 权重的叠加」答案</h4> <ul><li><p>问题 1：在使用哪一类选择器时需要考虑权重叠加的问题？</p> <ul><li>复合选择器</li></ul></li> <li><p>问题 2：权重叠加可以进位吗？</p> <ul><li>不可以</li></ul></li></ul> <h3 id="_1-7-权重两个练习题-二-05-25"><a href="#_1-7-权重两个练习题-二-05-25" class="header-anchor">#</a> 1.7 权重两个练习题（二 ~ 05'25''）</h3> <blockquote><p>要与 pink 老师一起互动哦。</p></blockquote> <table><thead><tr><th>选择器</th> <th>权重</th></tr></thead> <tbody><tr><td>继承或 <code>*</code></td> <td><code>0,0,0,0</code></td></tr> <tr><td>标签选择器</td> <td><code>0,0,0,1</code></td></tr> <tr><td>类选择器 / 伪类选择器</td> <td><code>0,0,1,0</code></td></tr> <tr><td>id 选择器</td> <td><code>0,1,0,0</code></td></tr> <tr><td>行内样式</td> <td><code>1,0,0,0</code></td></tr> <tr><td><code>!important</code></td> <td><code>∞</code></td></tr></tbody></table> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>页面布局多用类，工作轻松不会累。</p></div> <h2 id="☆2-盒子模型原理"><a href="#☆2-盒子模型原理" class="header-anchor">#</a> ☆2. 盒子模型原理</h2> <h3 id="_2-1-盒子模型导读-二-01-10"><a href="#_2-1-盒子模型导读-二-01-10" class="header-anchor">#</a> 2.1 盒子模型导读（二 ~ 01'10''）</h3> <blockquote><p>过渡视频，介绍盒子模型的学习路径：</p></blockquote> <ol><li>盒子模型原理
<ol><li>准确阐述盒子模型的四个组成部分</li> <li>能够计算盒子的实际大小</li></ol></li> <li>盒子模型应用
<ol><li>能够利用盒子模型布局模块案例</li></ol></li> <li>盒子外观（部分）
<ol><li>利用边框复合写法给元素添加边框</li> <li>给盒子设置圆角边框</li> <li>给盒子添加阴影</li> <li>给文字添加阴影</li></ol></li></ol> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>需要安装像素大厨（pxcook），课堂演示图片测量方法。</p></div> <h3 id="_2-2-看透网页布局本质-二-03-57"><a href="#_2-2-看透网页布局本质-二-03-57" class="header-anchor">#</a> 2.2 看透网页布局本质（二 ~ 03'57''）</h3> <h4 id="_2-2-1-「看透网页布局本质」问题"><a href="#_2-2-1-「看透网页布局本质」问题" class="header-anchor">#</a> 2.2.1 「看透网页布局本质」问题</h4> <ul><li>问题 1：网页布局的三大核心是什么？</li> <li>问题 2：网页布局过程有哪三步？</li> <li>问题 3：网页布局的核心本质是什么？</li></ul> <h4 id="_2-2-2-「看透网页布局本质」答案"><a href="#_2-2-2-「看透网页布局本质」答案" class="header-anchor">#</a> 2.2.2 「看透网页布局本质」答案</h4> <ul><li><p>问题 1：网页布局的三大核心是什么？</p> <ul><li>盒子模型 → 浮动 → 定位（<strong>基础班会全部学到</strong>）</li></ul></li> <li><p>问题 2：网页布局过程有哪三步？</p> <ol><li>准备素材，网页元素基本都是盒子</li> <li>用 CSS 设置好盒子样式，然后摆放到相应位置</li> <li>往盒子里面装内容</li></ol></li> <li><p>问题 3：网页布局的核心本质是什么？</p> <ul><li>利用 CSS 摆盒子。</li></ul></li></ul> <h3 id="_2-3-盒子模型组成部分-二-03-34"><a href="#_2-3-盒子模型组成部分-二-03-34" class="header-anchor">#</a> 2.3 盒子模型组成部分（二 ~ 03'34''）</h3> <h4 id="_2-3-1-「盒子模型组成部分」问题"><a href="#_2-3-1-「盒子模型组成部分」问题" class="header-anchor">#</a> 2.3.1 「盒子模型组成部分」问题</h4> <ul><li>问题 1：CSS 盒子模型包含哪四个部分？</li></ul> <h4 id="_2-3-2-「盒子模型组成部分」答案"><a href="#_2-3-2-「盒子模型组成部分」答案" class="header-anchor">#</a> 2.3.2 「盒子模型组成部分」答案</h4> <ul><li><p>问题 1：CSS 盒子模型包含哪四个部分？</p> <ol><li>实际内容（教室中的桌椅）</li> <li>内边距（桌椅距离四周墙的距离）</li> <li>边框（教室的墙壁）</li> <li>外边距（教室四周距离其他教室的距离）</li></ol></li></ul> <p><img src="/basenode/assets/img/box-model.62cc8702.png" alt="盒模型"></p> <h2 id="☆3-盒子模型-边框-border"><a href="#☆3-盒子模型-边框-border" class="header-anchor">#</a> ☆3. 盒子模型 - 边框 border</h2> <h3 id="_3-1-盒子模型边框-border-三-07-31"><a href="#_3-1-盒子模型边框-border-三-07-31" class="header-anchor">#</a> 3.1 盒子模型边框 border（三 ~ 07'31''）</h3> <h4 id="_3-1-1-「盒子模型边框-border」问题"><a href="#_3-1-1-「盒子模型边框-border」问题" class="header-anchor">#</a> 3.1.1 「盒子模型边框 border」问题</h4> <ul><li>问题 1：在 CSS 中可以通过哪个属性来设置边框？</li> <li>问题 2：能够设置哪些边框样式？</li></ul> <h4 id="_3-1-2-「盒子模型边框-border」答案"><a href="#_3-1-2-「盒子模型边框-border」答案" class="header-anchor">#</a> 3.1.2 「盒子模型边框 border」答案</h4> <ul><li><p>问题 1：在 CSS 中可以通过哪个属性来设置边框？</p> <ul><li>border</li></ul></li> <li><p>问题 2：能够设置哪些边框样式？</p> <table><thead><tr><th>属性</th> <th>作用</th></tr></thead> <tbody><tr><td>border-width</td> <td>边框粗细，单位是 px</td></tr> <tr><td>border-style</td> <td><code>solid</code> 实线 / <code>dashed</code> 虚线 / <code>dotted</code> 点线</td></tr> <tr><td>border-color</td> <td>边框的颜色</td></tr></tbody></table></li></ul> <h3 id="_3-2-边框的复合写法-三-07-49"><a href="#_3-2-边框的复合写法-三-07-49" class="header-anchor">#</a> 3.2 边框的复合写法（三 ~ 07'49''）</h3> <h4 id="_3-2-1-「边框的复合写法」问题"><a href="#_3-2-1-「边框的复合写法」问题" class="header-anchor">#</a> 3.2.1 「边框的复合写法」问题</h4> <ul><li>问题 1：边框的复合写法有顺序要求吗？推荐写法是什么？</li> <li>问题 2：能够单独设置一个边框吗？如何实现？</li></ul> <h4 id="_3-2-2-「边框的复合写法」答案"><a href="#_3-2-2-「边框的复合写法」答案" class="header-anchor">#</a> 3.2.2 「边框的复合写法」答案</h4> <ul><li><p>问题 1：边框的复合写法有顺序要求吗？推荐写法是什么？</p> <ul><li>没有</li> <li>推荐写法：<code>border: 1px solid #000;</code></li></ul></li> <li><p>问题 2：能够单独设置一个边框吗？如何实现？</p> <ul><li>可以</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px solid #000<span class="token punctuation">;</span>
<span class="token property">border-top</span><span class="token punctuation">:</span> 1px solid #000<span class="token punctuation">;</span>
<span class="token property">border-left</span><span class="token punctuation">:</span> 1px solid #000<span class="token punctuation">;</span>
<span class="token property">border-right</span><span class="token punctuation">:</span> 1px solid #000<span class="token punctuation">;</span>
</code></pre></div></li></ul> <h3 id="_3-3-表格细线边框-三-05-30"><a href="#_3-3-表格细线边框-三-05-30" class="header-anchor">#</a> 3.3 表格细线边框（三 ~ 05'30''）</h3> <h4 id="_3-3-1-「表格细线边框」问题"><a href="#_3-3-1-「表格细线边框」问题" class="header-anchor">#</a> 3.3.1 「表格细线边框」问题</h4> <ul><li>问题 1：<code>border-collapse: collapse;</code> 的作用是什么？</li> <li>问题 2：案例中用到了哪一个复合选择器，为什么？</li></ul> <h4 id="_3-3-2-「表格细线边框」答案"><a href="#_3-3-2-「表格细线边框」答案" class="header-anchor">#</a> 3.3.2 「表格细线边框」答案</h4> <ul><li><p>问题 1：<code>border-collapse: collapse;</code> 的作用是什么？</p> <ul><li><code>border-collapse: collapse;</code> 可以把相邻的边框合并到一起</li></ul></li> <li><p>问题 2：案例中用到了哪一个复合选择器，为什么？</p> <ul><li><strong>并集选择器</strong> —— 找大伙，统一设置样式</li></ul></li></ul> <h4 id="_3-3-3-「表格细线边框」练习-05-00"><a href="#_3-3-3-「表格细线边框」练习-05-00" class="header-anchor">#</a> 3.3.3 「表格细线边框」练习（05'00'')</h4> <blockquote><p>提示：要养成目录和文件命名的习惯。</p></blockquote> <ol><li><p>练习目标：练习<strong>使用 CSS 设置表格边框</strong></p></li> <li><p>练习步骤：</p> <ol><li>新建文件 <code>表格细线边框.html</code>；</li> <li>使用 CSS 修改素材代码中的表格显示。</li></ol> <p>素材代码如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>500<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>250<span class="token punctuation">&quot;</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">cellspacing</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>thead</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>排名<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>关键词<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>进入搜索<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>最近七日<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">&gt;</span></span>相关链接<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>thead</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tbody</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>鬼吹灯<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>456<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>123<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>贴吧<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>图片<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>百科<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>鬼吹灯<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>456<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>123<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>贴吧<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>图片<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>百科<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>西游记<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>456<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>123<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>贴吧<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>图片<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>百科<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>鬼吹灯<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>456<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>123<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>贴吧<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>图片<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>百科<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>鬼吹灯<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>456<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>123<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>贴吧<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>图片<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>百科<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>鬼吹灯<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>456<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span>123<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>贴吧<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>图片<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>百科<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tbody</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>参考代码如下：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">table</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">th</span> <span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">table,
th,
td</span> <span class="token punctuation">{</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #333<span class="token punctuation">;</span>
  <span class="token property">border-collapse</span><span class="token punctuation">:</span> collapse<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h3 id="☆3-4-边框会影响盒子实际大小-三-03-40"><a href="#☆3-4-边框会影响盒子实际大小-三-03-40" class="header-anchor">#</a> ☆3.4 边框会影响盒子实际大小（三 ~ 03'40''）</h3> <h4 id="_3-4-1-「边框会影响盒子实际大小」问题"><a href="#_3-4-1-「边框会影响盒子实际大小」问题" class="header-anchor">#</a> 3.4.1 「边框会影响盒子实际大小」问题</h4> <ul><li>问题 1：边框会影响一个盒子的实际大小吗？</li> <li>问题 2：如何解决？</li></ul> <h4 id="_3-4-2-「边框会影响盒子实际大小」答案"><a href="#_3-4-2-「边框会影响盒子实际大小」答案" class="header-anchor">#</a> 3.4.2 「边框会影响盒子实际大小」答案</h4> <ul><li><p>问题 1：边框会影响一个盒子的实际大小吗？</p> <ul><li>会</li></ul></li> <li><p>问题 2：如何解决？</p> <ol><li>测量盒子大小时，不测量边框；</li> <li><code>width</code> / <code>height</code> 减去边框宽度。</li></ol></li></ul> <h2 id="☆4-盒子模型-内边距-padding"><a href="#☆4-盒子模型-内边距-padding" class="header-anchor">#</a> ☆4. 盒子模型 - 内边距 padding</h2> <h3 id="_4-1-盒子模型内边距-padding-三-04-10"><a href="#_4-1-盒子模型内边距-padding-三-04-10" class="header-anchor">#</a> 4.1 盒子模型内边距 padding（三 ~ 04'10''）</h3> <h4 id="_4-1-1-「盒子模型内边距-padding」问题"><a href="#_4-1-1-「盒子模型内边距-padding」问题" class="header-anchor">#</a> 4.1.1 「盒子模型内边距 padding」问题</h4> <ul><li>问题 1：内边距的应用场景是什么？</li> <li>问题 2：在一个盒子中，可以分别设置四个方向的内边距吗？</li></ul> <h4 id="_4-1-2-「盒子模型内边距-padding」答案"><a href="#_4-1-2-「盒子模型内边距-padding」答案" class="header-anchor">#</a> 4.1.2 「盒子模型内边距 padding」答案</h4> <ul><li><p>问题 1：内边距的应用场景是什么？</p> <ul><li>设置内容与边框之间的距离</li></ul></li> <li><p>问题 2：在一个盒子中，可以分别设置四个方向的内边距吗？</p> <ul><li>可以</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">padding-top</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token property">padding-right</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token property">padding-bottom</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
<span class="token property">padding-left</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
</code></pre></div></li></ul> <h3 id="_4-2-padding-复合属性-三-06-07"><a href="#_4-2-padding-复合属性-三-06-07" class="header-anchor">#</a> 4.2 padding 复合属性（三 ~ 06'07''）</h3> <h4 id="_4-2-1-「padding-复合属性」问题"><a href="#_4-2-1-「padding-复合属性」问题" class="header-anchor">#</a> 4.2.1 「padding 复合属性」问题</h4> <ul><li>问题 1：内边距的复合写法有几种？</li></ul> <h4 id="_4-2-2-「padding-复合属性」答案"><a href="#_4-2-2-「padding-复合属性」答案" class="header-anchor">#</a> 4.2.2 「padding 复合属性」答案</h4> <ul><li><p>问题 1：内边距的复合写法有几种？</p> <table><thead><tr><th>值的个数</th> <th>含义</th> <th>记忆</th></tr></thead> <tbody><tr><td>padding: 5px;</td> <td>四周都是 5px</td> <td>一个管四边</td></tr> <tr><td>padding: 5px 10px;</td> <td>上下 5px / 左右 10px</td> <td>上下和两边</td></tr> <tr><td>padding: 5px 10px 20px;</td> <td>上 5px / 左右 10px / 下 20px</td> <td>左右放中间</td></tr> <tr><td>padding: 5px 10px 20px 30px;</td> <td>上 / 右 / 下 / 左，顺时针</td> <td>顺势方向圈</td></tr></tbody></table></li></ul> <h3 id="_4-3-padding-会影响盒子实际大小-三-04-32"><a href="#_4-3-padding-会影响盒子实际大小-三-04-32" class="header-anchor">#</a> 4.3 padding 会影响盒子实际大小（三 ~ 04'32''）</h3> <h4 id="_4-3-1-「padding-会影响盒子实际大小」问题"><a href="#_4-3-1-「padding-会影响盒子实际大小」问题" class="header-anchor">#</a> 4.3.1 「padding 会影响盒子实际大小」问题</h4> <ul><li>问题 1：padding 会影响一个盒子的实际大小吗？</li> <li>问题 2：如何解决？</li></ul> <h4 id="_4-3-2-「padding-会影响盒子实际大小」答案"><a href="#_4-3-2-「padding-会影响盒子实际大小」答案" class="header-anchor">#</a> 4.3.2 「padding 会影响盒子实际大小」答案</h4> <ul><li><p>问题 1：padding 会影响一个盒子的实际大小吗？</p> <ul><li>会</li></ul></li> <li><p>问题 2：如何解决？</p> <ul><li><code>width</code> / <code>height</code> 减去多出来的 <code>padding</code></li></ul></li></ul> <h3 id="☆4-4-padding-应用-新浪导航栏-2-案例-四"><a href="#☆4-4-padding-应用-新浪导航栏-2-案例-四" class="header-anchor">#</a> ☆4.4 padding 应用-新浪导航栏（2）案例（四）</h3> <h4 id="_4-4-1-「案例」演练目标"><a href="#_4-4-1-「案例」演练目标" class="header-anchor">#</a> 4.4.1 「案例」演练目标</h4> <ol><li>利用 padding 撑开盒子巧做等距离的导航栏</li></ol> <h4 id="_4-4-2-相关取值和素材"><a href="#_4-4-2-相关取值和素材" class="header-anchor">#</a> 4.4.2 相关取值和素材</h4> <ol><li><p>上边框 <code>3px</code> <code>#ff8500</code></p></li> <li><p>下边框 <code>1px</code> <code>#edeef0</code></p></li> <li><p>盒子高度 <code>41px</code>，背景色 <code>#fcfcfc</code></p></li> <li><p>文字颜色 <code>#4c4c4c</code></p></li> <li><p>HTML 结构代码如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>设为首页<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>手机新浪网<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>移动客户端<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>播客<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>微博<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>关注我<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ol> <h4 id="_4-4-3-代码实现"><a href="#_4-4-3-代码实现" class="header-anchor">#</a> 4.4.3 代码实现</h4> <ol><li><p>摆放大盒子</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.nav</span> <span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 41px<span class="token punctuation">;</span>
  <span class="token property">border-top</span><span class="token punctuation">:</span> 3px solid #ff8500<span class="token punctuation">;</span>
  <span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px solid #edeef0<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fcfcfc<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 41px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>调整 a 链接样式</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.nav a</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0 20px<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #4c4c4c<span class="token punctuation">;</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>鼠标经过伪类</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.nav a:hover</span> <span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #eee<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #ff8500<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h4 id="_4-4-4-处理-inline-block-的间隙-面试题"><a href="#_4-4-4-处理-inline-block-的间隙-面试题" class="header-anchor">#</a> 4.4.4 处理 inline-block 的间隙（面试题）</h4> <ol><li><p>在 <code>.nav</code> 增加 <code>font-size: 0;</code>，空格的字体大小为零则不可见，间隙消失</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">font-size</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
</code></pre></div></li> <li><p>在 <code>.nav a</code> 设置显示字体，按照需要的字体显示</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span>
</code></pre></div></li></ol> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>常见面试题：如何处理 <code>inline-block</code> 之间的间隙？</p> <p>答案：将父级元素的字体设置为 0，内部重新设置字体。</p></div> <h3 id="_4-5-1-小米侧边栏修改-四-02-56"><a href="#_4-5-1-小米侧边栏修改-四-02-56" class="header-anchor">#</a> 4.5.1 小米侧边栏修改（四 ~ 02'56''）</h3> <h4 id="_4-5-1-「小米侧边栏修改」问题"><a href="#_4-5-1-「小米侧边栏修改」问题" class="header-anchor">#</a> 4.5.1 「小米侧边栏修改」问题</h4> <ul><li>问题 1：开发时，除了段落首行缩进外，为什么不建议用 <code>text-indent</code> 做文字左侧距离的缩进？</li> <li>问题 2：实际开发中文字距离左侧的距离是如何处理的？有什么注意点？</li></ul> <h4 id="_4-5-2-「小米侧边栏修改」答案"><a href="#_4-5-2-「小米侧边栏修改」答案" class="header-anchor">#</a> 4.5.2 「小米侧边栏修改」答案</h4> <ul><li><p>问题 1：开发时，除了段落首行缩进外，为什么不建议用 <code>text-indent</code> 做文字左侧距离的缩进？</p> <ul><li>用 <code>text-indent</code> 不够精确</li></ul></li> <li><p>问题 2：实际开发中文字距离左侧的距离是如何处理的？有什么注意点？</p> <ul><li>实际开发中使用 <code>padding</code></li> <li>注意：<code>padding</code> 会撑开盒子，因此需要<strong>调整盒子的宽度</strong>。</li></ul></li></ul> <h3 id="_4-6-1-padding-不会撑开盒子的情况-四-04-55"><a href="#_4-6-1-padding-不会撑开盒子的情况-四-04-55" class="header-anchor">#</a> 4.6.1 padding 不会撑开盒子的情况（四 ~ 04'55''）</h3> <h4 id="_4-6-1-「padding-不会撑开盒子的情况」问题"><a href="#_4-6-1-「padding-不会撑开盒子的情况」问题" class="header-anchor">#</a> 4.6.1 「padding 不会撑开盒子的情况」问题</h4> <ul><li>问题 1：在什么情况下，<code>padding</code> 不会撑开盒子？</li></ul> <h4 id="_4-6-2-「padding-不会撑开盒子的情况」答案"><a href="#_4-6-2-「padding-不会撑开盒子的情况」答案" class="header-anchor">#</a> 4.6.2 「padding 不会撑开盒子的情况」答案</h4> <ul><li><p>问题 1：在什么情况下，<code>padding</code> 不会撑开盒子？</p> <ul><li>没有指定 <code>width</code> / <code>height</code> 的属性。</li></ul></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>这些特殊情况不建议死记硬背，记住修改 <code>border</code> 和 <code>padding</code> 都会影响盒子大小，在修改这两个属性时，留意一下是否会超出边界，如果会及时调整就可以了。</p></div> <h2 id="☆5-盒子模型-外边距-margin"><a href="#☆5-盒子模型-外边距-margin" class="header-anchor">#</a> ☆5. 盒子模型 - 外边距 margin</h2> <h3 id="_5-1-盒子模型外边距-margin-五-06-34"><a href="#_5-1-盒子模型外边距-margin-五-06-34" class="header-anchor">#</a> 5.1 盒子模型外边距 margin（五 ~ 06'34''）</h3> <h4 id="_5-1-1-「盒子模型外边距-margin」问题"><a href="#_5-1-1-「盒子模型外边距-margin」问题" class="header-anchor">#</a> 5.1.1 「盒子模型外边距 margin」问题</h4> <ul><li>问题 1：外边距的应用场景是什么？</li> <li>问题 2：能够给一个盒子分别设置四个方向的外边距吗？</li> <li>问题 3：盒子外边距的复合写法是怎样的？</li></ul> <h4 id="_5-1-2-「盒子模型外边距-margin」答案"><a href="#_5-1-2-「盒子模型外边距-margin」答案" class="header-anchor">#</a> 5.1.2 「盒子模型外边距 margin」答案</h4> <ul><li><p>问题 1：外边距的应用场景是什么？</p> <ul><li>控制盒子与盒子之间的距离</li></ul></li> <li><p>问题 2：能够给一个盒子分别设置四个方向的外边距吗？</p> <ul><li>可以</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">margin-top</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token property">margin-right</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token property">margin-bottom</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
<span class="token property">margin-left</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
</code></pre></div></li> <li><p>问题 3：盒子外边距的复合写法是怎样的？</p> <ul><li>与 padding 的写法一致</li></ul> <table><thead><tr><th>值的个数</th> <th>含义</th> <th>记忆</th></tr></thead> <tbody><tr><td>margin: 5px;</td> <td>四周都是 5px</td> <td>一个管四边</td></tr> <tr><td>margin: 5px 10px;</td> <td>上下 5px / 左右 10px</td> <td>上下和两边</td></tr> <tr><td>margin: 5px 10px 20px;</td> <td>上 5px / 左右 10px / 下 20px</td> <td>左右放中间</td></tr> <tr><td>margin: 5px 10px 20px 30px;</td> <td>上 / 右 / 下 / 左</td> <td>顺势方向圈</td></tr></tbody></table></li></ul> <h3 id="_5-2-外边距典型应用-块级盒子水平居中对齐-五-03-41"><a href="#_5-2-外边距典型应用-块级盒子水平居中对齐-五-03-41" class="header-anchor">#</a> 5.2 外边距典型应用-块级盒子水平居中对齐（五 ~ 03'41''）</h3> <h4 id="_5-2-1-「外边距典型应用-块级盒子水平居中对齐」问题"><a href="#_5-2-1-「外边距典型应用-块级盒子水平居中对齐」问题" class="header-anchor">#</a> 5.2.1 「外边距典型应用-块级盒子水平居中对齐」问题</h4> <ul><li>问题 1：用外边距实现盒子水平居中的两个条件是什么？</li></ul> <h4 id="_5-2-2-「外边距典型应用-块级盒子水平居中对齐」答案"><a href="#_5-2-2-「外边距典型应用-块级盒子水平居中对齐」答案" class="header-anchor">#</a> 5.2.2 「外边距典型应用-块级盒子水平居中对齐」答案</h4> <ul><li><p>问题 1：用外边距实现盒子水平居中的两个条件是什么？</p> <ol><li>盒子必须有宽度</li> <li>水平间距设置为 <code>auto</code></li></ol></li></ul> <h3 id="_5-3-行内元素和行内块元素水平居中-五-02-40"><a href="#_5-3-行内元素和行内块元素水平居中-五-02-40" class="header-anchor">#</a> 5.3 行内元素和行内块元素水平居中（五 ~ 02'40''）</h3> <h4 id="_5-3-1-「行内元素和行内块元素水平居中」问题"><a href="#_5-3-1-「行内元素和行内块元素水平居中」问题" class="header-anchor">#</a> 5.3.1 「行内元素和行内块元素水平居中」问题</h4> <ul><li>问题 1：让<strong>行内元素</strong>或<strong>行内块元素</strong>实现水平居中应该怎么做？</li></ul> <h4 id="_5-3-2-「行内元素和行内块元素水平居中」答案"><a href="#_5-3-2-「行内元素和行内块元素水平居中」答案" class="header-anchor">#</a> 5.3.2 「行内元素和行内块元素水平居中」答案</h4> <ul><li><p>问题 1：让<strong>行内元素</strong>或<strong>行内块元素</strong>实现水平居中应该怎么做？</p> <ul><li>给其父盒子添加 <code>text-align: center;</code></li></ul></li></ul> <h3 id="_5-4-外边距合并-相邻块元素垂直外边距-五-04-17"><a href="#_5-4-外边距合并-相邻块元素垂直外边距-五-04-17" class="header-anchor">#</a> 5.4 外边距合并-相邻块元素垂直外边距（五 ~ 04'17''）</h3> <h4 id="_5-4-1-「外边距合并-相邻块元素垂直外边距」问题"><a href="#_5-4-1-「外边距合并-相邻块元素垂直外边距」问题" class="header-anchor">#</a> 5.4.1 「外边距合并-相邻块元素垂直外边距」问题</h4> <ul><li>问题 1：请说出相邻元素垂直外边距合并的情况，如何解决？</li></ul> <h4 id="_5-4-2-「外边距合并-相邻块元素垂直外边距」答案"><a href="#_5-4-2-「外边距合并-相邻块元素垂直外边距」答案" class="header-anchor">#</a> 5.4.2 「外边距合并-相邻块元素垂直外边距」答案</h4> <ul><li><p>问题 1：请说出相邻元素垂直外边距合并的情况，如何解决？</p> <ul><li>上面的盒子有 <code>margin-bottom</code>，下面的盒子有 <code>margin-top</code>，取最大值</li> <li>解决办法：只设置一个盒子的 <code>margin</code></li></ul></li></ul> <h3 id="_5-5-外边距合并-嵌套块元素塌陷-五-06-04"><a href="#_5-5-外边距合并-嵌套块元素塌陷-五-06-04" class="header-anchor">#</a> 5.5 外边距合并-嵌套块元素塌陷（五 ~ 06'04''）</h3> <h4 id="_5-5-1-「外边距合并-嵌套块元素塌陷」问题"><a href="#_5-5-1-「外边距合并-嵌套块元素塌陷」问题" class="header-anchor">#</a> 5.5.1 「外边距合并-嵌套块元素塌陷」问题</h4> <ul><li>问题 1：请说出嵌套块元素塌陷的情况？</li> <li>问题 2：视频中介绍了几种方案，哪一种是推荐的？</li></ul> <h4 id="_5-5-2-「外边距合并-嵌套块元素塌陷」答案"><a href="#_5-5-2-「外边距合并-嵌套块元素塌陷」答案" class="header-anchor">#</a> 5.5.2 「外边距合并-嵌套块元素塌陷」答案</h4> <ul><li><p>问题 1：请说出嵌套块元素塌陷的情况？</p> <ul><li>父子元素同时具有上外边距</li> <li>父元素会塌陷较大的外边距</li></ul></li> <li><p>问题 2：视频中介绍了几种方案，哪一种是推荐的？</p> <ul><li>顶部增加边框</li> <li>顶部增加 padding</li> <li><code>overflow: hidden;</code> 推荐</li></ul></li></ul> <h3 id="_5-6-清除内外边距-五-04-52"><a href="#_5-6-清除内外边距-五-04-52" class="header-anchor">#</a> 5.6 清除内外边距（五 ~ 04'52''）</h3> <h4 id="_5-6-1-「清除内外边距」问题"><a href="#_5-6-1-「清除内外边距」问题" class="header-anchor">#</a> 5.6.1 「清除内外边距」问题</h4> <ul><li>问题 1：开发时为什么要做清除内外边距的事情？</li> <li>问题 2：视频中推荐的清除内外边距的方案是什么？</li> <li>问题 3：行内元素在设置内外间距时有什么需要注意的？</li></ul> <h4 id="_5-6-2-「清除内外边距」答案"><a href="#_5-6-2-「清除内外边距」答案" class="header-anchor">#</a> 5.6.2 「清除内外边距」答案</h4> <ul><li><p>问题 1：开发时为什么要做清除内外边距的事情？</p> <ul><li>网页元素很多都带有默认的内外边距，而且浏览器的默认值也不尽相同</li> <li>清除内外边距可以避免<strong>默认样式</strong>对布局的干扰</li></ul></li> <li><p>问题 2：视频中推荐的清除内外边距的方案是什么？</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">*</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>问题 3：行内元素在设置内外间距时有什么需要注意的？</p> <ul><li>尽量只设置左右内外间距，不要设置上下内外间距。</li></ul></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><code>*</code> 代表选择任何元素，由于浏览器引擎查找元素使用的策略不同，有可能会存在性能问题。</p> <p>后续学习 CSS Reset 相关知识会提供更完整的解决办法。</p></div> <h2 id="☆6-综合案例-产品模块布局"><a href="#☆6-综合案例-产品模块布局" class="header-anchor">#</a> ☆6. 综合案例 - 产品模块布局</h2> <h3 id="_6-1-产品模块布局分析图"><a href="#_6-1-产品模块布局分析图" class="header-anchor">#</a> 6.1 产品模块布局分析图</h3> <p><img src="/basenode/assets/img/box-layout.d6df1fa4.png" alt="布局分析图"></p> <h3 id="_6-2-像素大厨切图稿"><a href="#_6-2-像素大厨切图稿" class="header-anchor">#</a> 6.2 像素大厨切图稿</h3> <img src="/basenode/assets/img/box-design.b8b591d7.png" width="50%"> <h3 id="_6-3-素材图片"><a href="#_6-3-素材图片" class="header-anchor">#</a> 6.3 素材图片</h3> <p><img src="/basenode/assets/img/img.8a0a2782.jpg" alt="素材图片"></p> <h3 id="_6-4-素材代码"><a href="#_6-4-素材代码" class="header-anchor">#</a> 6.4 素材代码</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>images/img.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>review<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>快递牛，整体不错蓝牙可以说秒连。红米给力<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>appraise<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>来自于 117384232 的评价<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token punctuation">&gt;</span></span>Redmi AirDots真无线蓝...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span><span class="token punctuation">&gt;</span></span>|<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>em</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span> 99.9元<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/basenode/css/day02.html" class="prev">
        CSS 第 02 天 —— 复合选择器
      </a></span> <span class="next"><a href="/basenode/css/day04.html">
        CSS 第 04 天 —— 浮动
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/basenode/assets/js/app.52c57e5d.js" defer></script><script src="/basenode/assets/js/2.fd1002bd.js" defer></script><script src="/basenode/assets/js/8.750a9450.js" defer></script>
  </body>
</html>
